<template lang="">
  <div>
    <table>
      <tr>
        <th style="width:120px;text-align:center">员工</td>
        <th>考勤记录</th>
      </tr>
      <tr v-for="item in dayinlist" :key="item.id">
        <td style="width:120px;text-align:center">{{ item.employee_name }}</td>
        <td class="com">
          <div class="left">
            <span>日期</span>
            <span>上班</span>
            <span>下班</span>
          </div>
          <div class="right">
            <div
              class="lis"
              v-for="(ite, index) in item.appendance_log"
              :key="index"
            >
              <div>{{ ite.date }}</div>
              <div>
                <span v-if="ite.first == 1" :title="item.first_time">
                  <i
                    class="el-icon-success"
                    style="color: green; font-size: 18px"
                  ></i
                ></span>
                <span v-if="ite.first == 2">
                  <i
                    class="el-icon-remove"
                    style="color: rgb(144, 148, 140); font-size: 18px"
                  ></i
                ></span>
                <span v-if="ite.first == 3" :title="item.first_time">
                  迟到</span
                >
                <span v-if="ite.first == 4"> 休息</span>
                <span v-if="ite.first == 5"> 请假</span>
              </div>
              <div>
                <span v-if="ite.last == 1" :title="item.last_time">
                  <i
                    class="el-icon-success"
                    style="color: green; font-size: 18px"
                  ></i
                ></span>
                <span v-if="ite.last == 2">
                  <i
                    class="el-icon-remove"
                    style="color: rgb(144, 148, 140); font-size: 18px"
                  ></i
                ></span>
                <span v-if="ite.last == 3" :title="item.last_time"> 迟到</span>
                <span v-if="ite.last == 4"> 休息</span>
                <span v-if="ite.last == 5"> 请假</span>
                <span v-if="ite.last == 6" :title="item.last_time"> 早退</span>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dayinlist: [],
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    console.log(this.dayinlist);
  },
  method: {},
};
</script>
<style scoped>

table{
    width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #333;
	border-left: 1px solid #333;
    margin-top: 25px;
}

table tr{
    border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}

table th,table td{
    border-right: 1px solid #333;
	border-bottom: 1px solid #333;
    min-height: 35px;
    line-height: 35px;
}
.com{
    display: flex;
}
.left{
    width:80px;
    min-width: 80px;
    display: flex;
    flex-direction:column;
    text-align: center;
}
.right{
    display: flex;
}

.right .lis{
    width: 40px;
    border: 1px solid #333;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: none;
    border-bottom: none;
}

.right .lis div{
    width: 40px;
    height: 40px;
    border-top: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right .lis div:first{
    border-top: none;

}
</style>
